<template>
	<view class="box">
		<navigator url="" class="info flex flai fljcsb">
			<view class="info-left flex flai">
				<image src="../../static/image/info.png" mode="" class="inform-icon"></image>
				<text>通知公告栏</text>
			</view>
			<view class="arrow-right" style="text-align: right;">></view>
		</navigator>
		<image src="../../static/image/myHelp_1.png" mode="" class="banner-bg"></image>
		<view class="info-box">
			<view class="user-head-info flex flai">
				<image src="../../static/image/home-son.png" mode="" class="user-head-pic"></image>
				<view class="user-info">
					<view class="user-name">{{info.name}}</view>
					<view class="people-case">{{info.joinCount}} 位家人保障中</view>
				</view>
			</view>
			<view class="setting" @click="setMessage()">
				<image src="../../static/image/myHelp_3.png" mode=""></image>
			</view>
			<view class="info-list-box flex flai fljcsb">
				<view class="info-list">
					<view>{{info.helpCount}}</view>
					<view>帮助人数</view>
				</view>
				<view class="info-list">
					<view>{{info.maAmount}}</view>
					<view>互助金额</view>
				</view>
				<view class="info-list" @click="redEnvel()">
					<view>{{info.redBagAmount}}</view>
					<view>红包 (元)</view>
				</view>
			</view>
		</view>
		<view class="gray"></view>
		<view class="classify-box">
			<view class="classify flex flai fljcsb">
				<view class="classify-left flex">
					<view :class="[num==1?'classify-acitve':'']" @click="largeClassifyTab(1)">我的互助</view>
					<view :class="[num==2?'classify-acitve':'']" @click="largeClassifyTab(2)">我的资产</view>
				</view>
				<navigator open-type='switchTab' class="add-home" url="/pages/joinPage/joinPage">添加家人</navigator>
			</view>
			<view class="slide">
				<swiper class="tab-contents" v-if="num==1&&helpListSwiper.length!=0" duration="300" next-margin="50rpx" style="height: 300rpx;">
					<!-- 我的互助 -->
					<swiper-item v-for="item in helpListSwiper" :key="item.id">
						<!-- 已激活并且认证完成 -->
						<view v-if="item.isActivate==1&&item.status==1" class="tab-swiper-item">
							<image src="../../static/image/myHelp_2.png" mode="" class="my-help-pic"></image>
							<view class="info-card flex fljcsb">
								<view class="info-head flex flai fljcsb">
									<view class="info-head-left flex1 flex">
										<text>{{item.name}}</text>
										<text>{{item.planName}}</text>
									</view>
									<view class="info-head-right" @click="guaranteeDetail(1,item.orderId)">
										保障详情
									</view>
								</view>
								<view class="info-center">
									<text>{{item.age|ageMoney}}</text>
									<text>万互助金权益</text>
								</view>
								<view class="info-bottom flex flai fljcsb">
									<view class="info-bottom-left">
										等待期{{item.waitDays}}天
									</view>
									<view class="info-bottom-right flex flai fljc">
										<image src="../../static/image/myHelp9.png" mode=""></image>
										<text>升级保障</text>
									</view>
								</view>
							</view>
						</view>
						<!-- 激活未认证 -->
						<view v-if="item.isActivate==0&&item.status==1" class="tab-swiper-item">
							<image src="../../static/image/myHelp_2.png" mode="" class="my-help-pic"></image>
							<view class="info-card flex fljcsb">
								<view class="info-head flex flai fljcsb">
									<view class="info-head-left flex1 flex">
										<text>{{item.name}}</text>
										<text>{{item.planName}}</text>
									</view>
									<view class="info-head-right" @click="guaranteeDetail(2,item.orderId)">
										保障详情
									</view>
								</view>
								<view class="info-center">
									<text>{{item.age|ageMoney}}</text>
									<text>万互助金权益</text>
								</view>
								<view class="info-bottom flex flai fljcsb">
									<view class="info-bottom-left">
										等待期{{item.waitDays}}天
									</view>
									<view class="info-bottom-right flex flai fljc">
										<image src="../../static/image/myHelp9.png" mode=""></image>
										<text>升级保障</text>
									</view>
								</view>
							</view>
						</view>
						<!-- 退出保障重新认证 -->
						<view v-if="item.status==0" class="tab-swiper-item">
							<image src="../../static/image/huiColor.png" mode="" class="my-help-pic"></image>
							<view class="info-card flex fljcsb">
								<view class="info-head flex flai fljcsb">
									<view class="info-head-left flex1 flex">
										<text style="color: #666666;font-size: 38rpx;">{{item.name}}</text>
										<text style="color: #999999;font-size: 30rpx;">{{item.planName}}</text>
									</view>
									<view class="info-head-right">
										<!-- 删除 -->
									</view>
								</view>
								<view class="info-center">
									<text style="color: #666666;font-size: 60rpx;">{{item.age|ageMoney}}</text>
									<text style="color: #666666;font-size: 48rpx;">万互助金权益</text>
								</view>
								<view class="info-bottom flex flai fljcsb">
									<view class="info-bottom-left" style="color: #F3A500;font-size: 20rpx;">
										已退出
									</view>
									<view class="info-bottom-right flex flai fljc" @click="resertJoin()">
										<text style="color: 30rpx;">重新加入</text>
									</view>
								</view>
							</view>
						</view>
						
					
					</swiper-item>
			      
				</swiper>
				<!-- 没有互助的时候显示 -->
				<view v-if="helpListSwiper.length==0" class="tab-swiper-item">
					<image src="../../static/image/huiColor.png" mode="" class="my-help-pic"></image>
					<view class="info-card flex fljcsb">
							<view class="flex1 flex">
								<text style="color: #4E5467;font-size: 36rpx;">您还没有加入蜜袋互助计划</text>
							</view>
						<view class="info-center">
							<text style="color: #666666;font-size: 60rpx;">35</text>
							<text style="color: #666666;font-size: 48rpx;">万互助金权益</text>
						</view>
						<view class="info-bottom flex flai fljcsb">
							<view class="info-bottom-left" style="color: #F3A500;font-size: 20rpx;">
							   
							</view>
							<view class="info-bottom-right flex flai fljc" @click="resertJoin()">
								<image style="width: 30rpx;height: 30rpx;margin-right: 5rpx;" src="../../static/image/joinAdd.png"></image>
								<text>立即加入</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 我的资产 -->
				<swiper class="tab-contents" duration="300" next-margin="50rpx" v-if="num==2&&navList.length!=0">
					<swiper-item v-for="item in navList" :key="item.id">
						<view class="tab-swiper-item">
							<image src="../../static/image/myHelp_10.png" mode="" class="my-help-pic"></image>
							<view class="info-card flex fljcsb">
								<view class="info-head flex flai fljcsb">
									<view class="info-head-left flex1 flex">
										<text>{{item.name}}</text>
										<text>{{item.stationType}}</text>
									</view>
									<view class="info-head-right" @click="moneyDetail(2,item.capitalId)">
										资产详情
									</view>
								</view>
								<view class="info-center" style="margin-top: 3rpx;">
									<view class="number-title">
										光伏电站组件编号
									</view>
									<view class="number-code">
										{{item.capitalNo}}
									</view>
								</view>
								<view class="info-bottom flex flai fljcsb">
									<view class="bottom-list">
										<text>{{item.quantity}}</text>
										<text>数量(组)</text>
									</view>
									<view class="bottom-list">
										<text>{{item.powerDays}}</text>
										<text>发电天数(天)</text>
									</view>
									<view class="bottom-list">
										<text>{{item.power}}</text>
										<text>发电量(kw/h)</text>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="more-server">
			<view class="more-server-title">
				更多服务
			</view>
			<view class="more-box flex flai">
				<view class="more-list" @click="handClick('a')">
					<image src="../../static/image/myHelp_4.png" mode=""></image>
					<text>申请互助金</text>
				</view>
				<navigator url="/pages/redPackage/redPackage" class="more-list">
					<image src="../../static/image/myHelp_8.png" mode=""></image>
					<text>邀请好友</text>
				</navigator>
				<navigator open-type='switchTab' class="more-list" url="/pages/joinPage/joinPage">
					<image src="../../static/image/myHelp_6.png" mode=""></image>
					<text>添加家人</text>
				</navigator>
				<navigator url="" class="more-list" @click="handClick('b')">
					<image src="../../static/image/myHelp_5.png" mode=""></image>
					<text>升级保障</text>
				</navigator>
				<view class="more-list" @click="handClick('b')">
					<image src="../../static/image/myHelp_7.png" mode=""></image>
					<text>我的账单</text>
				</view>
			</view>
		</view>
		<!-- 我的订单 -->
		<view class="orderEntrance">
			<view class="orderEntran" @click="jumpMineorder(1)">
				<image src="../../static/image/waitPay.png"></image>
				<text>待付款</text>
			</view>
			<view class="orderEntran" @click="jumpMineorder(2)">
				<image src="../../static/image/advanceSale.png"></image>
				<text>预售</text>
			</view>
			<view class="orderEntran" @click="jumpMineorder(0)">
				<image src="../../static/image/mineOrder.png"></image>
				<text>我的订单</text>
			</view>
		</view>
		<!-- 在线客服 -->
		<view class="server-people flex flai fljc" @click="call">
			<image src="../../static/image/myHelp_11.png" mode=""></image>
			<text>在线客服</text>
		</view>


		<!-- 手机号验证弹框 -->
		<view class="mask1" v-if="mobileShow">
			<view class="mobile-alert">
				<view class="mobile-head flex flai">
					<view class="mobile-title flex1">绑定手机号</view>
					<image src="../../static/image/close.png" mode="" class="close" @click="closeMobileAlert"></image>
				</view>
				<view class="moble-form">
					<view class="section flex flai">
						<input type="number" value="" @blur.prevent="changeBlur()" maxlength="11" v-model="mobile" class="flex1" placeholder="请输入手机号" />
						<button :disabled="phoneBtn" @click="getMobileCode">{{phoneMsg}}</button>
					</view>
					<view class="section flex flai">
						<input type="number" maxlength="6" @blur.prevent="changeBlur()" value="" v-model="smsCode" class="flex1" placeholder="请输入验证码" />

					</view>
					<view class="submit-btn"  v-clickAgain="nextPage" >
						确 定
					</view>
				</view>
			</view>

		</view>
		<!-- 弹窗模板 -->
		<uni-pops ref="uniPops"></uni-pops>
	</view>
</template>

<script>
	import api from '../../api/index.js'
	import {
		sendMsgHank
	} from '../../static/common.js'
	export default {
		data() {
			return {
				helpListSwiper: [], //我的互助列表数据
				navList: [], //我的资产列表
				num: 1, //tab切换需要的值
				info: {}, //个人信息
				mobileShow: false, //是否绑定手机号
				mobile: '', //手机号
				smsCode: '', //验证码
				phoneMsg: '获取验证码',
				phoneBtn: false, //获取验证码按钮
			}
		},
		onShow() {
			var isBindMobile = uni.getStorageSync('bindMobile');
			if (!isBindMobile) {
				this.mobileShow = true;
			}
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
			// 获取顶部信息
			this.getResumeInfo()
			// 获取互助列表
			this.getMyHelpList()
			// 获取资产列表
			this.getmyPropertyList()

		},
		methods: {
			// 解决ios键盘唤起，键盘收起以后页面不归位
			changeBlur() {
				let u = navigator.userAgent,
					app = navigator.appVersion;
				let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
				if (isIOS) {
					setTimeout(() => {
						const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
						window.scrollTo(0, Math.max(scrollHeight - 1, 0))
					}, 200)
				}
			},
			// 对未开放的进行提醒操作
			handClick(type) {
				var msg = ''
				if (type == 'a') {
					msg = '180天等待期后才可申请'
				}
				if (type == 'b') {
					msg = '功能暂未开放'
				}
				uni.showToast({
					title: msg,
					icon: 'none'
				})
			},
			//设置按钮跳转
			setMessage() {
				uni.navigateTo({
					url: `/pages/myMutualHelp/setting`
				})
			},
			// 重新加入
			resertJoin() {
				uni.switchTab({
					url: `/pages/joinPage/joinPage`
				})
			},
			// 保障详情跳转页面
			guaranteeDetail(types, orderId) {
				if (types == 1) {
					uni.navigateTo({
						url: `/pages/myMutualHelp/safeguardDetail?type=${types}&orderId=${orderId}`
					})
				} else if (types == 2) {
					uni.navigateTo({
						url: `/pages/guarantee/guarantee?source=${types}&orderId=${orderId}`
					})
				}
			},
			// 资产详情页面跳转
			moneyDetail(types, orderId) {
				uni.navigateTo({
					url: `/pages/myMutualHelp/safeguardDetail?type=${types}&orderId=${orderId}`
				})
			},
			// 跳转到订单界面
			jumpMineorder(currtIdx) {
				uni.navigateTo({
					url: `/pages/mineOrder/mineOrder?tabCurrentIndex=${currtIdx}`
				})
			},
			// 获取个人信息
			getResumeInfo() {
				api.myHelp.personInfo().then(res => {
					if (res.code == 1) {
						this.info = res.data;
						uni.setStorageSync('name', res.data.name);
					}
				})
			},
			// 获取资产列表
			getmyPropertyList() {
				api.myHelp.myPropertyList().then(res => {
					if (res.code == 1) {
						this.navList = res.data
					}
				})
			},
			// 获取我的互助列表
			getMyHelpList() {
				api.myHelp.myHelpList().then(res => {
					if (res.code == 1) {
						this.helpListSwiper = res.data
					}
				})
			},
			// 红包管理
			redEnvel() {
				uni.navigateTo({
					url:'/pages/myMutualHelp/redEnvelopeManagement'
				})
			},
			// 拨打电话
			call() {
				this.$refs.uniPops.show()
			},
			// 分类选项卡下标 高亮
			largeClassifyTab(index) {
				this.num = index
			},
			// 获取手机验证码
			getMobileCode() {
				sendMsgHank(this.mobile, this)
			},
			// 关闭手机弹框
			closeMobileAlert() {
				this.mobileShow = false
			},
			// 点击确定绑定手机号
			nextPage() {
				var mobileRegex = /^1\d{10}$/
				var codeRegex = /^\d{6}$/
				if (!mobileRegex.test(this.mobile)) {
					uni.showToast({
						title: '请输入正确的手机号',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				if (!codeRegex.test(this.smsCode)) {
					uni.showToast({
						title: '请输入正确的手机验6位数字证码',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				var data = {
					mobile: this.mobile,
					validCode: this.smsCode,
					openId: uni.getStorageSync('openId')
				}
				api.wxAuth.mobileBind(data).then(res => {
					if (res.code == 1) {
						uni.setStorageSync('token', res.data.token);
						uni.setStorageSync('bindMobile', true);
						this.mobileShow = false;
						this.getResumeInfo()
						this.getMyHelpList()
						this.getmyPropertyList()
						uni.showToast({
							title: '绑定成功'
						})
					}
				})
			},

		}
	}
</script>

<style>
	@import "../../static/css/common.css";
	@import url("./myMutualHelp.css");
	@import url("../joinPage/joinPage.css");

	/* 只有这一个页面需要单独设置 */
	.box {
		background: none;
		padding-bottom: calc(var(--window-bottom) + 20rpx);
	}
</style>
